import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ytbusiness/config/icon_list.dart';
import 'package:ytbusiness/config/style.dart';
import 'package:ytbusiness/utils/screen_adaptation.dart';
import 'package:ytbusiness/widgets/widgets.dart';

//添加银行卡表单
class BankCardForm extends StatefulWidget {
  @override
  _BankCardFormState createState() => _BankCardFormState();
}

class _BankCardFormState extends State<BankCardForm> {
  Timer _countdownTimer;
  int _countdownNum = 60;
  String bankName = "中国农业银行";
  String bankIcon = IconList.agriculturalBank;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        //输入框失焦
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Scaffold(
        appBar: customAppBar(context, title: "添加银行卡", elevation: 0.5),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              //持卡人姓名
              Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border(
                      bottom: BorderSide(
                        color: Color(0xffF0F0F0),
                        width: 0.5,
                      ),
                    )),
                padding: EdgeInsets.only(
                    top: setWidth(21),
                    bottom: setWidth(21),
                    left: setWidth(15),
                    right: setWidth(15)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      child: Text(
                        "持卡人姓名",
                        style: TextStyle(
                            color: Color(0xff321212), fontSize: setSp(16)),
                      ),
                      width: setWidth(90),
                    ),
                    SizedBox(
                      width: setWidth(10),
                    ),
                    Expanded(
                        child: Container(
                      child: TextField(
                        textAlign: TextAlign.start,
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        autofocus: false,
                        inputFormatters: [
                          WhitelistingTextInputFormatter(
                              RegExp("[\u4e00-\u9fa5]|[a-zA-Z]")),
                        ],
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          focusedBorder: InputBorder.none,
                          enabledBorder: InputBorder.none,
                          hintText: "请输入姓名",
                          hintStyle: TextStyle(
                              color: Color(0xffC6C9CE), fontSize: setSp(16)),
                        ),
                      ),
                    )),
                  ],
                ),
              ),
              //银行卡号
              Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border(
                      bottom: BorderSide(
                        color: Color(0xffF0F0F0),
                        width: 0.5,
                      ),
                    )),
                padding: EdgeInsets.only(
                    top: setWidth(21),
                    bottom: setWidth(21),
                    left: setWidth(15),
                    right: setWidth(15)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      child: Text(
                        "银行卡号",
                        style: TextStyle(
                            color: Color(0xff321212), fontSize: setSp(16)),
                      ),
                      width: setWidth(90),
                    ),
                    SizedBox(
                      width: setWidth(10),
                    ),
                    Expanded(
                        child: Container(
                      child: TextField(
                        textAlign: TextAlign.start,
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        autofocus: false,
                        inputFormatters: [
                          WhitelistingTextInputFormatter(RegExp("[0-9.]")),
                          //只允许输入小数
                        ],
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          focusedBorder: InputBorder.none,
                          enabledBorder: InputBorder.none,
                          hintText: "请输入银行卡号",
                          hintStyle: TextStyle(
                              color: Color(0xffC6C9CE), fontSize: setSp(16)),
                        ),
                      ),
                    )),
                  ],
                ),
              ),
              //开户行
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  Navigator.of(context).pushNamed("choice_bank").then((value) {
                    if (value != null) {
                      Map val = value as Map;
                      setState(() {
                        bankName = val["name"] as String;
                        bankIcon = val["image"] as String;
                      });
                    }
                  });
                },
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border(
                        bottom: BorderSide(
                          color: Color(0xffF0F0F0),
                          width: 0.5,
                        ),
                      )),
                  padding: EdgeInsets.only(
                      top: setWidth(21),
                      bottom: setWidth(21),
                      left: setWidth(15),
                      right: setWidth(15)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Container(
                        child: Text(
                          "开户行",
                          style: TextStyle(
                              color: Color(0xff321212), fontSize: setSp(16)),
                        ),
                        width: setWidth(90),
                      ),
                      SizedBox(
                        width: setWidth(10),
                      ),
                      Expanded(
                          child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              Container(
                                child: Image.asset(
                                  bankIcon,
                                  fit: BoxFit.cover,
                                ),
                                width: setWidth(22),
                                height: setWidth(22),
                              ),
                              SizedBox(
                                width: setWidth(6),
                              ),
                              Container(
                                child: Text(
                                  bankName,
                                  style: TextStyle(
                                      color: Color(0xff323232),
                                      fontSize: setSp(16)),
                                ),
                              )
                            ],
                          ),
                          Container(
                            child: Image.asset(
                              "assets/images/pay_go.png",
                              fit: BoxFit.cover,
                            ),
                            width: setWidth(7),
                            height: setWidth(14),
                          ),
                        ],
                      )),
                    ],
                  ),
                ),
              ),
              //手机号
              Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border(
                      bottom: BorderSide(
                        color: Color(0xffF0F0F0),
                        width: 0.5,
                      ),
                    )),
                padding: EdgeInsets.only(
                    top: setWidth(21),
                    bottom: setWidth(21),
                    left: setWidth(15),
                    right: setWidth(15)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      child: Text(
                        "手机号",
                        style: TextStyle(
                            color: Color(0xff321212), fontSize: setSp(16)),
                      ),
                      width: setWidth(90),
                    ),
                    SizedBox(
                      width: setWidth(10),
                    ),
                    Expanded(
                        child: Container(
                      child: TextField(
                        textAlign: TextAlign.start,
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        autofocus: false,
                        inputFormatters: [
                          WhitelistingTextInputFormatter(RegExp("[0-9-]")),
                          //只允许输入小数
                        ],
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          focusedBorder: InputBorder.none,
                          enabledBorder: InputBorder.none,
                          hintText: "请输入银行预留手机号",
                          hintStyle: TextStyle(
                              color: Color(0xffC6C9CE), fontSize: setSp(16)),
                        ),
                      ),
                    )),
                    SizedBox(
                      width: setWidth(5),
                    ),
                    GestureDetector(
                      onTap: () {
                        _countdown();
                      },
                      child: Container(
                        width: setWidth(80),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: YTStyle.mainColor, width: setWidth(0.5)),
                            borderRadius: BorderRadius.circular(2)),
                        child: Text(
                          (_countdownNum != 60) ? "$_countdownNum s" : "获取验证码",
                          style: TextStyle(
                              color: YTStyle.mainColor, fontSize: setSp(14)),
                        ),
                        padding: EdgeInsets.only(
                            top: setWidth(3),
                            bottom: setWidth(3),
                            left: setWidth(3),
                            right: setWidth(3)),
                      ),
                    ),
                  ],
                ),
              ),
              //验证码
              Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border(
                      bottom: BorderSide(
                        color: Color(0xffF0F0F0),
                        width: 0.5,
                      ),
                    )),
                padding: EdgeInsets.only(
                    top: setWidth(21),
                    bottom: setWidth(21),
                    left: setWidth(15),
                    right: setWidth(15)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      child: Text(
                        "验证码",
                        style: TextStyle(
                            color: Color(0xff321212), fontSize: setSp(16)),
                      ),
                      width: setWidth(90),
                    ),
                    SizedBox(
                      width: setWidth(10),
                    ),
                    Expanded(
                        child: Container(
                      child: TextField(
                        textAlign: TextAlign.start,
                        maxLines: 1,
                        keyboardType: TextInputType.multiline,
                        autofocus: false,
                        inputFormatters: [
                          WhitelistingTextInputFormatter(
                              RegExp("[0-9-]|[a-zA-Z]")),
                        ],
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          focusedBorder: InputBorder.none,
                          enabledBorder: InputBorder.none,
                          hintText: "请输入验证码",
                          hintStyle: TextStyle(
                              color: Color(0xffC6C9CE), fontSize: setSp(16)),
                        ),
                      ),
                    )),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _countdownTimer?.cancel();
    _countdownTimer = null;
    super.dispose();
  }

  //发送验证码 倒计时
  _countdown() {
//    if(_phone.text.toString().trim() == ""){
//      toast("请输入手机号码");
//      return;
//    }

    if (_countdownTimer != null) {
      return;
    }
    _getCheckCode();
  }

  _getCheckCode() {
    //     开启倒计时
    _countdownTimer = Timer.periodic(new Duration(seconds: 1), (timer) {
      setState(() {
        if (_countdownNum > 0) {
          _countdownNum -= 1;
          print(_countdownNum);
        } else {
          _countdownNum = 60;
          _countdownTimer.cancel();
          _countdownTimer = null;
        }
      });
    });
  }
}
